<!--
 * @Date: 2024-05-30 15:36:52
 * @LastEditors: 陈俊宇 467724386@qq.com
 * @LastEditTime: 2024-08-13 17:14:58
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue 3 UMD Component Example</title>
    </head>
    <body>
        <!-- <script src="path/to/pinia.global.prod.js"></script> -->
        <!-- 引入Vue -->
        <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></> -->
        <!-- 引入你的组件库 -->
        <!-- <script src="./dist/my-vue-app.umd.cjs"></> -->
        <!-- 初始化Vue应用 -->

        <!-- <div id="app"> -->
        <!-- <service-chat code="111"></service-chat> -->
        <!-- </div> -->

        <!-- <script>
			const { createApp, h, render } = Vue;

			const app = createApp({});
			app.use(ServiceChat);
			app.mount('#app');

			// 在Vue实例中控制组件显示的变量
			app.config.globalProperties.showServiceChat = false;

			// 定义一个方法来动态创建并挂载ServiceChat组件
			app.config.globalProperties.toggleServiceChat = function () {
				if (this.showServiceChat) {
					this.showServiceChat = false;
					return;
				}

				const ServiceChatComponent = app.component('ServiceChat');
				const serviceChatVNode = h(ServiceChatComponent);

				// 创建一个临时的挂载点
				const container = document.createElement('div');
				document.getElementById('app').appendChild(container);

				// 渲染组件
				render(serviceChatVNode, container);

				this.showServiceChat = true;
			};

			// 调用方法以显示组件
			app.config.globalProperties.toggleServiceChat();
		</script> -->

        <script src="./test.js"></script>
    </body>
</html>
